<template>  
  <el-tree-select
    style="min-width:220px;"
    :default-expanded-keys="defaultExpandedKeys"
    v-model="typeId"
    :data="typeOptions"
    :props="{ value: 'id', label: 'name', children: 'children' }"
    value-key="id"
    placeholder="请选择设备类型"
    check-strictly
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { listType } from "@/api/base/type";

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({})
  }
});

// 定义选中的场馆区域 ID
const typeId = ref(null);
// 定义场馆区域选项
const typeOptions = ref([]);
// 定义一个 ref 来存储默认展开的节点键值
const defaultExpandedKeys = ref([]);
// 在组件挂载时获取场馆数据
onMounted(() => {
  getTypeTree();
});

// 监听 queryParams 的变化
watch(() => props.queryParams, (newQueryParams, oldQueryParams) => {
  if (newQueryParams !== oldQueryParams) {
    getTypeTree();
  }
}, { deep: true });

function getTypeTree() {
  listType(props.queryParams).then(response => {
    typeOptions.value = response.data;
    // 设置默认展开第一层级的节点键值
    defaultExpandedKeys.value = typeOptions.value.map(item => item.id);
  });
}
function changeType() {
  emit('change', typeId);
}
</script>
